/**
 * Created by lvlq on 16/3/3.
 */




var fadeOut = function (cb) {
    var i = 1;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i <= 0) {
            clearInterval(timer);
            cb && cb();
        }
        i -= step;
        $(".old-tong").css("opacity", i);
    }, 20);
};

var fadeIn = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".new-tong").css("opacity", i);
    }, 20);
};
var moveHand1 = function (cb) {
    var x = 657;
    var y = 209;

    var stepx = (657 - 435) / 50;
    var stepy = (209 - 211) / 50;

    var timer = setInterval(function () {
        if (x <= 435) {
            clearInterval(timer);
            cb && cb();
        }
        x -= stepx;
        y -= stepy;
        $(".hand").css({
            'transform': 'translate(' + x + 'px,' + y + 'px)',
            '-webkit-transform': 'translate(' + x + 'px,' + y + 'px)'
        });
    }, 20);
};

var word1 = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".w-1").css("opacity", i);
    }, 20);
};

var moveHand2 = function (cb) {
    var x = 435;
    var y = 211;

    var stepx = (435 - 435) / 50;
    var stepy = (284 - 211) / 50;

    var timer = setInterval(function () {
        if (y >= 284) {
            clearInterval(timer);
            cb && cb();
        }
        x -= stepx;
        y += stepy;
        $(".hand").css({
            'transform': 'translate(' + x + 'px,' + y + 'px)',
            '-webkit-transform': 'translate(' + x + 'px,' + y + 'px)'
        });
    }, 20);
};

var word2 = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".w-2").css("opacity", i);
    }, 20);
};


var moveHand3 = function (cb) {
    var x = 435;
    var y = 284;

    var stepx = (435 - 435) / 50;
    var stepy = (352 - 284) / 50;

    var timer = setInterval(function () {
        if (y >= 352) {
            clearInterval(timer);
            cb && cb();
        }
        x -= stepx;
        y += stepy;
        $(".hand").css({
            'transform': 'translate(' + x + 'px,' + y + 'px)',
            '-webkit-transform': 'translate(' + x + 'px,' + y + 'px)'
        });
    }, 20);
};

var word3 = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".w-3").css("opacity", i);
    }, 20);
};


var moveHand4 = function (cb) {
    var x = 435;
    var y = 352;

    var stepx = (435 - 435) / 50;
    var stepy = (421 - 352) / 50;

    var timer = setInterval(function () {
        if (y >= 421) {
            clearInterval(timer);
            cb && cb();
        }
        x -= stepx;
        y += stepy;
        $(".hand").css({
            'transform': 'translate(' + x + 'px,' + y + 'px)',
            '-webkit-transform': 'translate(' + x + 'px,' + y + 'px)'
        });
    }, 20);
};


var word4 = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".w-4").css("opacity", i);
    }, 20);
};

var moveHand5 = function (cb) {
    var x = 435;
    var y = 421;

    var stepx = (435 - 435) / 50;
    var stepy = (493 - 421) / 50;

    var timer = setInterval(function () {
        if (y >= 493) {
            clearInterval(timer);
            cb && cb();
        }
        x -= stepx;
        y += stepy;
        $(".hand").css({
            'transform': 'translate(' + x + 'px,' + y + 'px)',
            '-webkit-transform': 'translate(' + x + 'px,' + y + 'px)'
        });
    }, 20);
};


var word5 = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".w-5").css("opacity", i);
    }, 20);
};

var moveHandRe = function (cb) {
    var x = 435;
    var y = 493;

    var stepx = (657 - 435 ) / 50;
    var stepy = (493 - 209) / 50;

    var timer = setInterval(function () {
        if (x >= 657) {
            clearInterval(timer);
            cb && cb();
        }
        x += stepx;
        y -= stepy;
        $(".hand").css({
            'transform': 'translate(' + x + 'px,' + y + 'px)',
            '-webkit-transform': 'translate(' + x + 'px,' + y + 'px)'
        });
    }, 20);
};

var fadeOutRe = function (cb) {
    var i = 0;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i >= 1) {
            clearInterval(timer);
            cb && cb();
        }
        i += step;
        $(".old-tong").css("opacity", i);
    }, 20);
};

var fadeInRe = function (cb) {
    var i = 1;
    var step = 1 / 50;
    var timer = setInterval(function () {
        if (i <= 0) {
            clearInterval(timer);
            cb && cb();
        }
        i -= step;
        $(".new-tong").css("opacity", i);
    }, 20);
};

var doAni = function () {
    fadeOut(function () {
    });

    fadeIn(function () {
        moveHand1(function () {
            word1(function () {
                moveHand2(function () {
                    word2(function () {
                        moveHand3(function () {
                            word3(function () {
                                moveHand4(function () {
                                    word4(function () {
                                        moveHand5(function () {
                                            word5(function () {
                                                fadeOutRe(function () {

                                                });

                                                fadeInRe(function () {

                                                });

                                                moveHandRe(function () {
                                                    $(".w-1").removeAttr("style");
                                                    $(".w-2").removeAttr("style");
                                                    $(".w-3").removeAttr("style");
                                                    $(".w-4").removeAttr("style");
                                                    $(".w-5").removeAttr("style");
                                                    setTimeout(function () {
                                                        doAni();
                                                    }, 1000);
                                                })
                                            })
                                        })
                                    });
                                })
                            })
                        });
                    });
                });
            });
        });
    });
};

doAni();



